<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形作业</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #left{
            float: left;
            margin-left: 50px;
            margin-right: 500px;
            margin-top: 50px;
        }
        #right{
            float: left;
            margin-top: 50px;
        }
        .colour{
            color: red;
            font-weight: bolder;
            margin-bottom: 10px;
        }
        label{
            margin-bottom: 10px;
        }

        #box{
            width: 300px;
            height: 350px;
            padding: 100px;
            border: 1px solid red;
        }
        #move1{
            width: 200px;
            height: 100px;
            background: blue;
            border: 1px solid black;
        }
        .box1{
            transform: skewX(10deg);
            -webkit-transform: skewX(10deg);
            -moz-transform: skewX(10deg);
            -o-transform: skewX(10deg);
            -ms-transform: skewX(10deg);
        }
        .box2{
            transform: skewY(20deg);
            -webkit-transform: skewY(20deg);
            -moz-transform: skewY(20deg);
            -o-transform: skewY(20deg);
            -ms-transform: skewY(20deg);
        }
        .box3{
            transform: skew(20deg,10deg);
            -webkit-transform: skew(20deg,10deg);
            -moz-transform: skew(20deg,10deg);
            -o-transform: skew(20deg,10deg);
            -ms-transform: skew(20deg,10deg);
        }
        .box4{
            transform: skew(20deg,20deg);
            -webkit-transform: skew(20deg,20deg);
            -moz-transform: skew(20deg,20deg);
            -o-transform: skew(20deg,20deg);
            -ms-transform: skew(20deg,20deg);
        }
        .box5{
            transform: skew(50deg,50deg);
            -webkit-transform: skew(50deg,50deg);
            -moz-transform: skew(50deg,50deg);
            -o-transform: skew(50deg,50deg);
            -ms-transform: skew(50deg,50deg);
        }
        .box6{
            transform: skew(45deg,15deg);
            -webkit-transform: skew(45deg,15deg);
            -moz-transform: skew(45deg,15deg);
            -o-transform: skew(45deg,15deg);
            -ms-transform: skew(45deg,15deg);
        }
        .box7{
            transform: skew(-25deg,-25deg);
            -webkit-transform: skew(-25deg,-25deg);
            -moz-transform: skew(-25deg,-25deg);
            -o-transform: skew(-25deg,-25deg);
            -ms-transform: skew(-25deg,-25deg);
        }
        .box8{
            transform: skew(0deg,0deg);
            -webkit-transform: skew(0deg,0deg);
            -moz-transform: skew(0deg,0deg);
            -o-transform: skew(0deg,0deg);
            -ms-transform: skew(0deg,0deg);
        }
    </style>
</head>
<body>
<div id="left">
    <p class="colour">CSS属性:</p>
    <p>transform:</p>
    <br/>
    <input type="radio" onclick="fn1()" id="one" name="translate" value="skewX(10deg)">
    <label for="one">skewX(10deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn2()" id="two" name="translate" value="skewY(20deg)">
    <label for="two">skewY(20deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn3()" id="three" name="translate" value="skew(20deg,10deg)">
    <label for="three">skew(20deg,10deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn4()" id="four" name="translate" value="skew(20deg,20deg)">
    <label for="four">skew(20deg,20deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn5()" id="fif" name="translate" value="skew(50deg,50deg)">
    <label for="fif">skew(50deg,50deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn6()" id="six" name="translate" value="skew(45deg,15deg)">
    <label for="six">skew(45deg,15deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn7()" id="even" name="translate" value="tskew(-25deg,-25deg)">
    <label for="even">skew(-25deg,-25deg)</label>
    <br/>
    <br/>
    <input type="radio" onclick="fn8()" id="eig" name="translate" value="skew(0deg,0deg)">
    <label for="eig">skew(0deg,0deg)</label>
</div>
<div id="right">
    <p class="colour">结果:</p>
    <div id="box">
        <p id="move1"></p>
    </div>
</div>



<script type="text/javascript">
    function fn1(){
        var img=document.getElementById("move1");
        img.className="box1";
    }
    function fn2(){
        var img=document.getElementById("move1");
        img.className="box2";
    }
    function fn3(){
        var img=document.getElementById("move1");
        img.className="box3";
    }
    function fn4(){
        var img=document.getElementById("move1");
        img.className="box4";
    }
    function fn5(){
        var img=document.getElementById("move1");
        img.className="box5";
    }
    function fn6(){
        var img=document.getElementById("move1");
        img.className="box6";
    }
    function fn7(){
        var img=document.getElementById("move1");
        img.className="box7";
    }
    function fn8(){
        var img=document.getElementById("move1");
        img.className="box8";
    }

</script >
</body>
</html>